@import "../../styles/index.less";

page {
  height: 100%;
  display: flex;

  .user-info {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 70rpx 50rpx 50rpx;

    .basic-form {
      flex: 1;
      margin-top: 140rpx;

      .title {
        display: block;
        font-size: 72rpx;
        margin-bottom: 140rpx;
      }

      .radio-group {
        flex: 1;
        display: flex;

        button {
          flex: 1;
          margin: 0;
          background-color: #fff;
          border-radius: 30rpx;
          border: 1px solid #c4c4c4;
          color: #c4c4c4;

          &:not(:last-child) {
            margin-right: 20rpx;
          }

          &::after { 
            border: none;
          }

          &.active {
            background-color: @purple100;
            color: #fff;
            border-color: @purple100;
          }
        }
      }
    }

    .next {
      margin: 0;
      border-radius: 30rpx;
      font-size: 35px;
      background-color: @purple100;
    }
  }
}

.form {
  .form-item {
    display: flex;
    flex-direction: row;
    &:not(:last-child) {
      margin-bottom: 40rpx;
    }

    .form-label {
      display: flex;
      flex-direction: column;
      justify-content: center;
      width: 180rpx;
      margin-right: 30rpx;
      font-size: 34rpx;
    }

    .form-control {
      flex: 1;
      padding: 10rpx 20rpx;
    }

    .form-unit {
      display: flex;
      flex-direction: column;
      justify-content: center;
      width: 80rpx;
      margin-left: 30rpx;
    }
  }
}
